<template>
  <div class="header">
    <div class="headerContent">

      <div class="contentLeft">
        <div class="logoBox">
          <img src="../../static/image/logo.png" alt="" style="cursor: pointer;" @click="handlemine">
        </div>
        <div class="contenttext" @click="handlemine">
          <!-- <p>我的</p> -->
          <p style="margin-right: 20px;">{{ $t('assemble.我的') }}</p>
          <img v-show="type == 'mine'" class="jt jtleft" src="../../static/image/jt.png" style="width:24px;height:24px"
            alt="">
        </div>
        <div class="contenttext" @click="handleinterval">
          <!-- <p>积分商城</p> -->
          <p>{{ $t('assemble.积分商城') }}</p>
          <img v-show="type == 'interval'" class="jt jtright" src="../../static/image/jt.png"
            style="width:24px;height:24px" alt="">
        </div>
      </div>
      <div class="contentRight">
        <div class="cnorenbox" @click="handleChangelang">
          <img class="cnorenimg" style="cursor: pointer;" src="../../static/image/cnoren.png" alt="">
        </div>
        <!-- <div class="contentRightText news">
          消息
        </div> -->
        <el-popover placement="top-start" trigger="hover">
          <!-- <el-button slot="reference">hover 激活</el-button> -->

          <div class="contentRightText news" slot="reference">
            <p>{{ $t('assemble.消息') }}</p>
          </div>
          <div class="newsBox">
            <div class="newsitem" v-for="(item, index) in messageList" @click="handleDetail('message', item.id)">
              <div class="top">
                <div class="title">{{ item.title }}</div>
              </div>

              <div class="content" v-html="item.content">
                <!-- {{ item.content }} -->
              </div>

              <div class="bottom">
                <div class="date">
                  {{ item.created_at }}
                </div>

                <div class="detail">
                  <div>
                    <p>{{ $t('assemble.查看详情') }}</p>
                  </div>
                  <div>
                    <img src="../../static/image/detail.png" alt="">
                  </div>

                </div>
              </div>
            </div>
          </div>
        </el-popover>

        <el-popover placement="top-start" trigger="hover">
          <!-- <el-button slot="reference">hover 激活</el-button> -->
          <div class="newsBox">
            <div class="newsitem" v-for="(item, index) in remindList" @click="handleDetail('remind', item.id)">
              <div class="top">
                <div class="title">{{ item.title }}</div>
              </div>

              <div class="content">
                {{ item.content }}
              </div>

              <div class="bottom">
                <div class="date">
                  {{ item.created_at }}
                </div>

                <div class="detail">
                  <div>
                    <p>{{ $t('assemble.查看详情') }}</p>
                  </div>
                  <div>
                    <img src="../../static/image/detail.png" alt="">
                  </div>

                </div>
              </div>
            </div>
          </div>
          <div class="contentRightText news" slot="reference">
            <p>{{ $t('assemble.提醒') }}</p>
          </div>
        </el-popover>

        <!-- <div class="contentRightText tixing">
          提醒
        </div> -->

        <el-popconfirm confirm-button-text='确定(Confirm)' cancel-button-text='取消(Cancellation)' icon="el-icon-info"
          icon-color="red" title="您确定要退出吗？(Are you sure you want to quit?)" @confirm="handleExit">
          <!-- <el-button slot="reference">删除</el-button> -->
          <div class="contentRightText exit" slot="reference">
            <p>{{ $t('assemble.退出') }}</p>
          </div>
        </el-popconfirm>
        <!-- <div class="contentRightText exit" @click="handleExit">
          退出
        </div> -->
        <div class="avatarOrName">
          <div><img class="avatarimg" :src="userData.avatar" alt=""></div>
          <div class="contentRightText name">{{ userData.name }}</div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import { messageList, remindList, userOwn } from "@/utils/api"
export default {
  data() {
    return {
      type: '',
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      messageList: [],
      remindList: [],
      userData: {},
    }
  },
  created() {
    if(localStorage.getItem("langtype")){
      this.$i18n.locale = localStorage.getItem("langtype")
      this.lang = localStorage.getItem("langtype")
    }else{
      this.$i18n.locale = 'en'
      this.lang = 'en'
    }
    // console.log("windows",window)
    if (window.location.hash == '#/mallIntegral') {
      this.type = 'interval'
    } else {
      this.type = 'mine'
    }
    this.getmessageList()
    this.getremindList()
    this.getuserOwn()
  },
  methods: {
    async getuserOwn() {
      let res = await userOwn({
        token: localStorage.getItem('token')
      })
      // console.log("用户信息", res)
      this.userData = res.data
    },
    async getmessageList() {
      let res = await messageList({
        token: localStorage.getItem('token')
      })
      console.log("消息列表", res)
      this.messageList = res.data.data
    },
    async getremindList() {
      let res = await remindList({
        token: localStorage.getItem('token')
      })
      console.log("提醒列表", res)
      this.remindList = res.data

    },

    handleChangelang() {

      if (this.$i18n.locale == 'en') {
        this.$i18n.locale = 'zh'
      } else {
        this.$i18n.locale = 'en'
      }
      
      localStorage.setItem("langtype",this.$i18n.locale)
    },
    handlemine() {
      this.type = 'mine'
      this.$router.push({ path: '/mine' })
      console.log("跳转积分商城")
    },
    handleinterval() {
      this.type = 'interval'
      this.$router.push({ path: '/mallIntegral' })

    },
    handleDetail(type, id) {
      console.log("www", location)
      // return

      console.log("1111", location.hash.split('?')[0])

      if (location.hash.split('?')[0] != '#/newDetail') {
        this.$router.push({ path: '/newDetail', query: { type: type, id: id } })

      } else {
        this.$router.push({ path: '/newDetail', query: { type: type, id: id } })
        location.reload()

      }

    },
    handleExit() {

      localStorage.removeItem("token")
      this.$router.push({ path: '/login' })
      this.$message({
        message: '已退出！',
        type: 'success'
      });
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-button--primary {
  background-color: #0057A7;
  border-color: #0057A7;
}

.newsBox {
  // width: 375px !important;
  height: 498px !important;
  background: #F7F8FA;
  border-radius: 10px 10px 10px 10px;
  // opacity: 1;
  // position: absolute;
  // top: 90px;
  padding: 15px;
  box-sizing: border-box;
  overflow: auto;


  // display: none;
  .newsitem {
    width: 345px;
    height: 146px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(221, 66, 131, 0.04);
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 15px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;


    .top {
      width: 319px;
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 24px;
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .title {
        width: 319px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .content {
      width: 100%;
      height: 50px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      // line-height: 21px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .date {
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 18px;
      }

      .detail {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}


.header {
  width: 100%;
  height: 60px;
  background: #0057A7;
  position: relative;
}

.headerContent {
  // width: 1920px;
  width: 1440px;
  height: 60px;
  background: #0057A7;
  margin: 0 auto;
  padding: 0 85px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .contentLeft {
    // width: 382px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-top: 5px;
    box-sizing: border-box;

    .logoBox {
      width: 48px;
      height: 48px;
      background-color: pink;
      margin-right: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .contenttext {
      font-size: 15px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 18px;
      cursor: pointer;
      position: relative;

      .jt {
        position: absolute;
        top: 42px;
      }

      .jtleft {
        left: 5px;
      }

      .jtright {
        left: 27px;

      }
    }
  }

  .contentRight {
    width: 485px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .cnorenbox {
      width: 30px;
      height: 30px;

      .cnorenimg {
        width: 100%;
        height: 100%;
      }
    }

    .contentRightText {
      font-size: 15px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 18px;
      cursor: pointer;
    }

    .avatarOrName {
      display: flex;
      align-items: center;

      img {
        width: 42px;
        height: 42px;
        margin-top: 4px;
        border-radius: 42px 42px 42px 42px;
      }

      .name {
        margin-left: 23px;
      }
    }
  }
}
</style>